<template>
	<view class="newsCell" @click="goToDetail">
		<image :src="data.picurl" mode="aspectFill"></image>
		<view class="contentBox">
			<text class="content">{{data.title}}</text>
			<view class="subContet" v-if="isHistory">
				<text class="author_hits">浏览时间：{{data.timestamp | timeFormat}}</text>
			</view>
			<view class="subContet" v-else>
				<text class="author_hits">{{data.author}}</text>
				<text class="author_hits">{{data.hits}}浏览</text>
			</view>
		</view>
	</view>
</template>

<script>
import dayjs from 'dayjs';
	export default {
		name: "NewsCell",
		data() {
			return {

			};
		},
		props: {
			data: {
				type: Object,
				default: {
					"id": "232",
					"title": "谷歌vs反垄断：“消灭”Cookie计划将延至2024年",
					"picurl": "http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20220729/1659113387.png",
					"posttime": "1659105841",
					"hits": "339",
					"timestamp": "1699774729",
					"classid": "53",
					"author": "腾讯新闻"
				},
			},
			isHistory: {
				type: Boolean,
				default: false
			}
		},
		filters:{
			timeFormat(v){
				return dayjs.unix(v).format("YYYY-MM-DD HH:mm:ss")
			}
		},
		methods:{
			goToDetail(){
				uni.navigateTo({
					url:`/pages/news-detial/news-detial?cid=${this.data.classid}&id=${this.data.id}`,
					success: () => {
						this.seveData(this.data)
					}
				})
			},
			seveData(data){
				if(!this.isHistory){
					uni.getStorage({
						key: "history_list",
						success: (res) => {
							console.log(res)
							if (res) {
								const historyList = res.data
								let list = historyList.filter(h_data => {
									return h_data.id != data.id
								});
								data.timestamp = dayjs(new Date()).unix()
								list.unshift(data)
								uni.setStorage({
									data: list,
									key: "history_list",
								})
							}
						},
						fail: (err) => {
							data.timestamp = dayjs(new Date()).unix(),
							uni.setStorage({
								
								data: [data],
								key: "history_list",
								success: () => {
									console.log("ddddddddddd")
								}
							})
						}
					})
				}
			}
			
		},
		
	}
</script>

<style lang="scss">
	.newsCell {
		border-bottom: 2rpx dashed #999;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		image {
			padding: 20rpx;
			width: 250rpx;
			height: 150rpx;
		}

		.contentBox {
			flex-grow: 1;
			padding-right: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: start;
			align-items: start;
			gap: 20rpx;

			.content {
				font-size: 30rpx;
				color: #333;
			}

			.author_hits {
				font-size: 24rpx;
				color: #666;
				padding-right: 20rpx
			}
		}
	}
</style>